<template>
  <div class="mui-numbox" :class="'my' + only">
    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
    <input class="mui-input-numbox" type="number" :value="count" ref="value"/>
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
  </div>
</template>

<script>

export default {
  props: {
    min: {
      type: Number,
      default: 1
    },
    max: {
      type: Number,
      default: 20
    },
    only: {
      type: String,
      default: 'ninput'
    },
    count: {
      type: Number,
      default: 1
    }
  },
  computed: {
    onlyo () {
      return '.my' + this.only
    }
  },
  watch: {
    min (newV, v) {
      // eslint-disable-next-line
      mui(this.onlyo).numbox().setOption('min', newV)
    },
    max (newV, v) {
      // eslint-disable-next-line
      mui(this.onlyo).numbox().setOption('max', newV)
    },
    count (newV, v) {
      // eslint-disable-next-line
      mui(this.onlyo).numbox().setValue(newV)
    }
  },
  mounted () {
    // 初始化
    this.init()
    // 数值监听
    this.onchange()
  },
  methods: {
    // 设置数值
    set (n) {
    // eslint-disable-next-line
      mui(this.onlyo).numbox().setValue(n)
    },
    // 获取数值
    get () {
    // eslint-disable-next-line
      return mui(this.onlyo).numbox().getValue()
    },
    // 初始化
    init () {
      // eslint-disable-next-line
      mui(this.onlyo).numbox()
      // eslint-disable-next-line
      mui(this.onlyo).numbox().setOption('min', this.min)
      // eslint-disable-next-line
      mui(this.onlyo).numbox().setOption('max', this.max)
    },
    // 数值监听
    onchange () {
      this.$refs.value.addEventListener('change', () => {
        this.$emit('change', this.get(), this.only)
      })
    }
  }
}
</script>

<style lang='stylus' scoped>

</style>
